<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1024 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M442.03 443.054c-7.516 0-14.336-4.096-18.094-10.926-12.974-24.914-38.574-40.274-66.898-40.274a75.715 75.715 0 0 0-66.908 40.274 20.756 20.756 0 0 1-27.648 8.53 20.756 20.756 0 0 1-8.53-27.648c20.48-38.226 59.73-62.116 103.086-62.116 43.346 0 82.944 23.89 103.076 62.116 5.12 9.902 1.372 22.528-8.53 27.648-3.072 1.71-6.482 2.396-9.554 2.396zm309.924 0c-7.506 0-14.336-4.096-18.084-10.926-12.974-24.914-38.574-40.274-66.908-40.274a75.715 75.715 0 0 0-66.898 40.274 20.756 20.756 0 0 1-27.648 8.53 20.756 20.756 0 0 1-8.53-27.648c20.48-38.226 59.73-62.116 103.076-62.116 43.356 0 82.944 23.89 103.086 62.116 5.12 9.902 1.362 22.528-8.53 27.648-3.072 1.71-6.492 2.396-9.564 2.396z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M512 1010.35c-274.77 0-498.35-223.58-498.35-498.35S237.23 13.65 512 13.65 1010.35 237.23 1010.35 512 786.77 1010.35 512 1010.35zm0-955.74C259.758 54.61 54.61 259.758 54.61 512S259.758 969.39 512 969.39 969.39 764.242 969.39 512 764.242 54.61 512 54.61z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M512 819.2a306.534 306.534 0 0 1-271.36-163.502c-5.12-9.892-1.362-22.528 8.53-27.648 9.902-5.12 22.528-1.362 27.648 8.54C322.898 723.968 413.01 778.24 512 778.24a266.24 266.24 0 0 0 235.182-141.312 20.756 20.756 0 0 1 27.648-8.53 20.756 20.756 0 0 1 8.53 27.648C730.112 756.736 626.002 819.2 512 819.2z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Iconc5 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
